<template>
  <div class="vux-toast">
    <div class="weui_mask_transparent" v-show="isShowMask && show"></div>
    <transition :name="transition">
      <div class="weui_toast" :style="{width: width}" :class="toastClass" v-show="show">
        <i class="weui_icon_toast" v-show="type !== 'text'"></i>
        <p class="weui_toast_content" v-if="text" :style="style" v-html="text"></p>
        <p class="weui_toast_content" v-else><slot></slot></p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    value: Boolean,
    time: {
      type: Number,
      default: 2000
    },
    type: {
      type: String,
      default: 'success'
    },
    transition: {
      type: String,
      default: 'vux-fade'
    },
    width: {
      type: String,
      default: '7.6em'
    },
    isShowMask: {
      type: Boolean,
      default: false
    },
    text: String
  },
  data () {
    return {
      show: false
    }
  },
  created () {
    if (this.value) {
      this.show = true
    }
  },
  computed: {
    toastClass () {
      return {
        'weui_toast_forbidden': this.type === 'warn',
        'weui_toast_cancel': this.type === 'cancel',
        'weui_toast_success': this.type === 'success',
        'weui_toast_text': this.type === 'text'
      }
    },
    style () {
      if (this.type === 'text' && this.width === 'auto') {
        return { padding: '10px' }
      }
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.$emit('input', true)
        this.$emit('on-show')
      }
      if (val) {
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          this.show = false
          this.$emit('input', false)
          this.$emit('on-hide')
        }, this.time)
      }
    },
    value (val) {
      this.show = val
    }
  }
}
</script>

<style lang="less">
@import '../../assets/styles/components/transition.less';
@import '../../assets/styles/components/weui/widget/weui_tips/weui_mask.less';
@import '../../assets/styles/components/weui/icon/weui_icon_font.less';
@import '../../assets/styles/components/weui/widget/weui_tips/weui_toast.less';

.weui_toast {
  transform: translateX(-50%);
  margin-left: 0!important;
}
.weui_toast_forbidden {
  color: #F76260;
}
.weui_toast.weui_toast_text{
  min-height: 0;
}
.weui_toast_text .weui_toast_content {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 15px;
}
.weui_loading_toast .weui_toast_content {
  margin-top: 0;
}
.weui_toast_success .weui_icon_toast:before {
  content: "\EA08";
}
.weui_toast_cancel .weui_icon_toast:before {
  content: "\EA0D";
}
.weui_toast_forbidden .weui_icon_toast:before {
  content: "\EA0B";
  color: #F76260;
}
</style>
